var url = "http://" + buildURL() + "/";

$(function() {
	
	if($(window).width()<1224){
		$('#rNav').hide();
		$('#droppable').css('width','950');
	}else{
		$('#rNav').show();
		$('#droppable').css('width',$(window).width()-320);
		$('#divOnline').css('height',$(window).height()-320);	
	}
	
	$(window).resize(function(){
		if($(window).width()<1224){
			$('#rNav').hide();
			$('#droppable').css('width','950');
		}else{
			$('#rNav').show();
			$('#droppable').css('width',$(window).width()-320);
			$('#divOnline').css('height',$(window).height()-320);	
		}
	});
	
	$("#cmdCreateWF").click(function(){
		var formID = $("#comForms").val();
		if(formID == 0){
			alert("Ung alert ni sam dito");
			return;
		}
		$(location).attr('href','/workflow/0/' + formID );
	});

	//registerUser();
	regUser()
	getFormsObject();
	getQuickNav();
});

function regUser(){
	 $('#frmUserRegistration').ajaxForm(function() { 
            $( "#divUserRegistration" ).dialog('close');
			getUsers();
     }); 
}

function getForms(){
	$.ajax({
	url: "/formJSON/0",
	cache: false
	}).done(function( results ) {
		var output = '<html><head></head><body  style="background-color:#fafafa"><h4>Home / Settings /</h4><h2><img src="/images/Posts.png" style="vertical-align:middle" style="border:0px">&nbsp;Forms</h2><table cellpadding=0 cellspacing=0 width="98%">';
		output += '<tr style="background-color:#f4f4f4">';
		output += '<td colspan=2><a href="/workspace" class="bluebutton">New Form</a></td>';
		output += '<td align="right"><input type="text" value="Search..." style="width:200px;font-style:Italic;color:#777" /></td>';
		output += '</tr>';
		output += '<tr>';
		output += '<td colspan=3><hr></td>';
		output += '</tr>';
		output += '<tr>';
		output += '<td colspan=3>';
		for (var index in results) {
			output +=  '<div class="requestview">';
			output += '<div class="requestBox">';
			output += '<h4 style="display: inline;"><img src="/images/posts.png" style="vertical-align:middle"/>&nbsp;'+ results[index].FormName +'</h4><br/><br/>';
			output += '<font color="#777" style="font-weight:normal"> ' +  results[index].Description + '</font>';
			output += '<div style="float:right"><a href="#"><img src="/images/ui/edit.png" style="vertical-align:middle"/></a>&nbsp;';
			output += '<a href="#"><img src="/images/ui/delete.png" style="vertical-align:middle"/></a></div>';
			output += '</div><br style="clear:both;"/>';
			output += '</div><br/>';
		}
		
		if(results.lenth==0){
			output += '<div class="notification_warning">';
			output +=  'No record found.';
			output +=  '</div>';
		}
		output += '</td>';
		output += '</tr>';
		output += '</table>';
		output += '</body></html>';
		
		$("#divView").html("");
		$("#divView").append(output);
		$("#divView").hide();
		$("#divView").fadeIn();
	});
}

function getUsers(){
	$.ajax({
	url: "/userJSON/0",
	cache: false
	}).done(function( results ) {
	
		var output = '<html><head></head><body  style="background-color:#fafafa"><h4>Home / Settings /</h4><h2><img src="/images/ui/user.png" style="vertical-align:middle" style="border:0px">&nbsp;Users</h2><table cellpadding=0 cellspacing=0 width="98%">';
		output += '<tr style="background-color:#f4f4f4">';
		output += '<td colspan=2><a id="registerUser" data-reveal-id="divLogin" href="#" class="bluebutton">Register User</a></td>';
		output += '<td align="right"><input type="text" value="Search..." style="width:200px;font-style:Italic;color:#777" /></td>';
		output += '</tr>';
		output += '<tr>';
		output += '<td colspan=3><hr></td>';
		output += '</tr>';
		output += '<tr>';
		output += '<td colspan=3>';
		for (var index in results) {
			output +=  '<div class="requestview">';
			output += '<div class="requestBox">';
			output += '<h4 style="display: inline;"><img class="pic" src="/images/users/' + results[index].id + '.jpg" style="vertical-align:middle"/>&nbsp;'+ results[index].Display_Name +'</h4><br/><br/>';
			output += '<font color="#777" style="font-weight:normal"> ' +  results[index].Email + '</font>';
			output += '<div style="float:right"><a href="#"><img src="/images/ui/edit.png" style="vertical-align:middle"/></a>&nbsp;';
			output += '<a href="#"><img src="/images/ui/delete.png" style="vertical-align:middle"/></a></div>';
			output += '</div><br style="clear:both;"/>';
			output += '</div><br/>';
		}
		if(results.length==0){
			output += '<div class="notification_warning">';
			output +=  'No record found.';
			output +=  '</div>';
		}
		
		output += '</td>';
		output += '</tr>';
		output += '</table>';
		output += '</body></html>';
		
		$("#divView").html("");
		$("#divView").append(output);
		$("#divView").hide();
		$("#divView").fadeIn();
		
		
		$("#registerUser").click(function(){
			$( "#divUserRegistration" ).dialog({
				dialogClass: 'dialogcontent',
				show: 'fade',
				hide: 'fade',
				height:500,
				width:450,
				modal:true,
				resizable:false
			});
		});
		
	});
}

function getWorkflows(){
	$.ajax({
	url: "/workflowview/",
	cache: false
	}).done(function( html ) {
		$("#divView").html("");
		$("#divView").append(html);
		$("#divView").hide();
		$("#divView").fadeIn();
		
		$("#anewWF").click(function(){
			$( "#divwfSettings" ).dialog({
				dialogClass: 'dialogcontent',
				show: 'fade',
				hide: 'fade',
				height:200,
				width:450,
				modal:true,
				resizable:false
			});
		});
	});
}

function getFormsObject(){
	$.ajax({
	url: "/formJSON/0",
	cache: false
	}).done(function( data ) {
		for(var i=0, l=data.length; i<l; i++){
			$('#comForms').append('<option value="' + data[i].ID +'">' + data[i].FormName +'</option>');
		}	
	});
}


function getQuickNav(){
	$.ajax({
	url: "/quicknav/",
	cache: false
	}).done(function( html ) {
		$("#divQuickNav").append(html);
		$("#divQuickNav").hide();
		$("#divQuickNav").fadeIn();
		$("#divQuickNav").jScrollPane({
			horizontalGutter:5,
			verticalGutter:5,
			'showArrows': false
		});
		$('.jspDrag').hide();
		$('.jspScrollable').mouseenter(function(){
			$(this).find('.jspDrag').stop(true, true).fadeIn('slow');
		});
		$('.jspScrollable').mouseleave(function(){
			$(this).find('.jspDrag').stop(true, true).fadeOut('slow');
		});
		getOnline();
	});
}

function getOnline(){
	$.ajax({
	url: "/userJSON/0",
	cache: false
	}).done(function( results ) {
			var onclick ="alert('For premium account only.')"
			var output = '<table border=0 cellpadding=2 cellspacing=0 width="100%">';
			
			for (var index in results) {
				output += '<tr class="rightNavRow" onclick="'+ onclick +'">';
				output += '<td width="20px"><img src="/images/users/' + results[index].id +'.jpg" width="30px" height="30px"></td>';
				output += '<td>' + results[index].Display_Name + '</td>';
				output += '<td align="center"><img src="/images/online.png"></td>';
				output += '</tr>';
			}
			
			output += '</table>';
			
			//lower right
			$("#divOnlineLowerRight").append(output);
			$("#divOnlineLowerRight").hide();
			$("#divOnlineLowerRight").fadeIn();
			$("#divOnlineLowerRight").jScrollPane({
				horizontalGutter:5,
				verticalGutter:5,
				'showArrows': false
			});
			
			//dock on right
			$("#divOnline").append(output);
			$("#divOnline").hide();
			$("#divOnline").fadeIn();
			$("#divOnline").jScrollPane({
				horizontalGutter:5,
				verticalGutter:5,
				'showArrows': false
			});
		/*	
		$( "#lrNav" ).accordion({
			collapsible: true,
			active: false
		});
		*/
		
		$('#lrNav h4').click(function(e) {
				//Close all <div> but the <div> right after the clicked <a>
				$(e.target).next('div').siblings('div').slideUp();
				//Toggle open/close on the <div> after the <a>, opening it if not open.
				$(e.target).next('div').slideToggle();
		});
		
		$('.ui-accordion-header').css('style','background:#444; border:0');
		
		$('.jspDrag').hide();
		$('.jspScrollable').mouseenter(function(){
			$(this).find('.jspDrag').stop(true, true).fadeIn('slow');
		});
		$('.jspScrollable').mouseleave(function(){
			$(this).find('.jspDrag').stop(true, true).fadeOut('slow');
		});
		getUsers();
	});
}


//get the list of orgchart
function getOrgchartList(){
	$.ajax({
	url: "/orgchartview",
	cache: false
	}).done(function( html ) {
		$("#divView").html("");
		$("#divView").append(html);
		$("#divView").hide();
		$("#divView").fadeIn();
	});
}
/*UPDATE ORGCHART STATUS*/
function updateOrgchartStatus(status,id){
        if(status==0){
                //alert("deactivate "+id)
		$(".warningUpdateOrgChart").text("Warning, Your orgchart will be deactivated");
		$(".confirmUpdateStatus").attr("title","Deactivate Orgchart?")
		title = "Deactivate Orgchart?";
        }else{
                $(".warningUpdateOrgChart").text("Warning, Your orgchart will be activated");
		title = "Activate Orgchart?";
        }
	$(".confirmUpdateStatus").dialog({
	      resizable: false,
	      height:160,
	      title:title,
	      modal: true,
	      buttons: {
		"Confirm": function() {
			$.post("/updateOrgchartStatus",{id:id,status:status},function(data){
				alert(data)
			})
			$(this).dialog("close");
		},
		Cancel: function() {
			$(this).dialog("close");
		}
	      }
	});
}
